import React, { Component } from "react";
import ReactDOM from "react-dom";
import location from "../assets/icon/dingweiAll.svg";
import { FloatInfoWindow } from "../components/infoWindow";
import { render } from "@testing-library/react";
const { AMap } = window;

export default class GdMap {
    static map;
    //地图层级
    static defaultZoom = 12;

    static defaultLngLat = [119.2105, 27.765168];
    //地图初始化
    static init() {
        this.map = new AMap.Map("map", {
            zoom: 13, //级别
            center: this.defaultLngLat, //中心点坐标
            resizeEnable: true, //初始加载定位
            // viewMode: '3D'//使用3D视图
            mapStyle: "amap://styles/ff6bc2e8fdc5dac780c978b6b935eef6", //自定义样式
        });
        // const marker = new AMap.Marker({
        //     icon: location,
        //     offset: new AMap.Pixel(-8, -7),
        //     position: this.defaultLngLat,
        // });
        // GdMap.map.add(marker);
        // GdMap.GetLocation()
    }

    //移动中心点
    static removeCenter() {
        GdMap.map.setZoomAndCenter(13, this.defaultLngLat)
    }

    //获取定位信息
    static GetLocation() {
        this.map.plugin("AMap.Geolocation", function () {
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //是否使用高精度定位，默认:true
                timeout: 5000, //超过10秒后停止定位，默认：无穷大
                maximumAge: 0, //定位结果缓存0毫秒，默认：0
                convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: false, //显示定位按钮，默认：true
                // buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                // buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            GdMap.map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, "complete", onComplete); //返回定位信息
            function onComplete(data) {
                // data是具体的定位信息
            }
        });
    }

    //标记图片
    static addIcon(lng, lat, IconUrl, data) {
        // const content = document.createElement("div");
        const icon = new AMap.Icon({
            size: new AMap.Size(50, 50), //图标尺寸
            image: IconUrl,
            imageSize: new AMap.Size(50, 50), // 图标所用图片大小
            imageOffset: new AMap.Pixel(0, 0), // 图标取图偏移量
        });
        const marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            icon: icon,
            offset: new AMap.Pixel(-8, -7),
            extData: data,
        });
        GdMap.map.add(marker);
        return marker;
    }

    //信息窗口
    static infoWindow(animalMarker, item, name) {
        const content = document.createElement("div");
        //创造infowindow实例
        const infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗口
            content: content, // 这里可能需要的是原生DOM，不是虚拟DOM，所以不能用react写的组件
            offset: new AMap.Pixel(16, 10),
        });
        ReactDOM.render(<FloatInfoWindow data={item} name={name} />, content); // 把虚拟DOM挂载到原生DOM上
        infoWindow.open(GdMap.map, animalMarker.getPosition());
        return infoWindow;
    }
}
